<template>
  <view class="buy3">
    <view class="name">
      <view>{{value.goldName}}</view>
      <image
        src="../../../static/iamges/maichu/fanhui@2x.png"
        class="image"
      ></image>
    </view>

    <view class="buy">
      <view class="money">
        <view>买入金额</view>
        <view class="red">交易规则</view>
      </view>

      <view class="input">
        <view>
          <view> </view>
          <input
            type="text"
            placeholder="最低买入1.00元"
            v-model="value.goldTurnover"
          />
        </view>
        <image
          src="../../../static/iamges/dingqihuangjin/caca.png"
          :class="!value.value ? 'eliminate' : ''"
          @click="eliminate"
        ></image>
      </view>
      <view class="txt"
        >买入0费率，预计03月04日（星期四)确定买入交易，确认金价为03月03日(星期三)的黄金ETF金价〔卖出手续费详见交易规则)</view
      >
    </view>

    <view class="payment">
      <view class="black">付款方式</view>
      <view class="money">
        <view>
          <view>我的钱包</view>
          <view>最多支付30000.00元</view>
        </view>
        <image
          src="../../../static/iamges/maichu/fanhui@2x.png"
          class="image"
        ></image>
      </view>
    </view>
    <text>点击确定即代表您知悉该产品的产品概要和投资人权益须知等相关内容</text>
    <view class="code">
      <input type="text" placeholder="请输入验证码" v-model="value.code" />
      <button @click="code">获取验证码</button>
    </view>

    <button @click="purchase(value)">确定</button>
     <u-toast ref="uToast" />
  </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("gold");
export default {
  onLoad(o) {
    console.log(o, "fundCode");
    // 动态表头
    wx.setNavigationBarTitle({
      title: o.goldName,
    });
    this.value.goldCode=o.goldCode
    this.value.goldId=o.goldId-0
    this.value.goldName=o.goldName
  },
  data() {
    return {
      value: {
        buyMode: "walletPay",
        // 用户短信验证码
        code: "",
        // 黄金代码
        goldCode: "",
        // 黄金产品id
        goldId: '',
        // 黄金名称
        goldName: "",
        // 黄金购买额
        goldTurnover: 1,
      },
    };
  },
  methods: {
    ...mapActions(["buyGold", "getCode"]),
    eliminate() {
      this.value.value = "";
    },

    // 购买
    async purchase(data) {
      console.log(data,'lllllll');
      const value = await this.buyGold(data);
      console.log(value,'value');

        if (value.code == 10010 && value.data.code&&value.data.goldTurnover) {
        this.$refs.uToast.show({
          title: "购买金额不能为空/用户短信不能为空",
          type: "error",
        });
      } else if (value.code == 10010 && value.data.code) {
        this.$refs.uToast.show({
          title: "用户短信验证码不能为空",
          type: "error",
        });
      } else if (value.code == 10010 ) {
        this.$refs.uToast.show({
          title: "购买金额不能为空",
          type: "error",
        });
      } else if (value.code == 10012) {
        this.$refs.uToast.show({
          title: "验证码错误",
          type: "error",
        });
      } 
      if (value.code == 10030) {
        console.log("购买成功");
         uni.navigateTo({
					url:"/pages/buy/buySucceed/buySucceed?money="+value.data+'&name='+this.value.goldName+'&url=/pages/riches/gold/gold'
        })
      }
    
    },
   // 短信验证
    async code() {
      const value = await this.getCode({
        userTel: uni.getStorageSync("userTel"),
      });
      console.log(value, "vvvvv");
      if (value.code == 10001) {
        this.$refs.uToast.show({
          title: "获取验证码成功，2分钟内有效",
          type: "success",
        });
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
.buy3 {
  padding: 40rpx 24rpx;
  background-color: #fafafa;
  color: #cdcdcd;
  font-size: 24rpx;
  > view {
    padding: 44rpx 40rpx;
    border-radius: 16rpx;
    background-color: rgb(255, 255, 255);
  }
  .code {
    display: flex;
    background-color: #fafafa;
    align-items: center;
    input {
      background-color: #ffffff;
      height: 60rpx;
      border-radius: 16rpx;
    }
  }
  .name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    color: #333333;
  }
  .buy {
    margin-top: 40rpx;
    > view {
      display: flex;
      justify-content: space-between;
    }
    .money {
      font-size: 20rpx;
      color: #333333;
      .red {
        color: #ff4658;
        font-size: 28rpx;
      }
    }
    .input {
      border-bottom: 2rpx solid red;
      padding: 12rpx 0;
      margin-top: 64rpx;
      align-items: center;
      color: black;
      image {
        height: 20rpx;
        width: 20rpx;
      }
    }
    .txt {
      padding-top: 64rpx;
    }
  }
  .payment {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .black {
      color: black;
      font-size: 32rpx;
    }
    .money {
      display: flex;
      align-items: center;
      view {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }
  }
  button {
    color: #ffffff;
    background-color: red;
    border-radius: 16rpx;
  }
  .image {
    width: 10rpx;
    height: 20rpx;
    padding-right: 16rpx;
    transform: scaleX(-1);
  }
  .eliminate {
    display: none;
  }
}
</style>
